
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-animate-css-class</title>
  <style>
    /* 添加移除的时候都带有过渡效果 */
    .on-add, .on-remove {
      transition: font-size 0.5s linear;  
      /* transition: all 0.5s ease-in-out; */
    }
    
    /* 添加.on后的样式 ；如果.on不设置样式，添加的效果会瞬间消失；因为active是一个时间点*/
    .on,
    .on-add.on-add-active {
      position: absolute;
      left:50%;
      top:50%;
      transform: translate(-50%,-50%);
      color: red;
      font-size: 3em;
    }
    /* 移除.on后的样式（还原默认样式） */
    .on-remove.on-remove-active {
      font-size: 1em;
      color: black;
    }
  </style>
  

  <script src="./libs/js/angular-1.6.9.min.js"></script>
  <script src="./libs/js/angular-animate.min.js"></script>
  

  
</head>
<body ng-app="app">
  <p>
  <button ng-click="className='on'">放大</button>
  <button ng-click="className=''">缩小</button>
  <br>
  <span ng-class="className">将要被放大或缩小的内容</span>
</p>
</body>
<script>
  var app=angular.module('app',['ngAnimate']);
</script>
</html>